<div class="row" style="padding-left: 5%;">
  <div class="row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
    <h3 class="header-title">创建PVC模版</h3>
  </div>
  <form [formGroup]="currentForm" style="padding-right: 30px;width: 100%">
    <section class="form-block wrap">
      <div *ngIf="clusters" formArrayName="clusters" class="form-group form-group-padding">
        <label class="col-md-3 form-group-label-override required">机房</label>
        <div *ngFor="let cluster of clusters;let i=index"
             style="padding-right: 15px" class="checkbox-inline"
             [formGroupName]="i">
          <input formControlName="checked"
                 type="checkbox"
                 id="{{cluster.id}}-check">
          <label for="{{cluster.id}}-check">{{cluster.name}}</label>
        </div>
      </div>
      <div class="form-group form-group-padding">
        <label class="col-md-3 form-group-label-override required">发布说明</label>
        <textarea formControlName="description"
                  rows="3"
                  style="width: 65%"
                  required>
        </textarea>
      </div>
      <div class="form-group form-group-padding">
        <label class="col-md-3 form-group-label-override required">容量大小</label>
        <input type="number" style="width: 200px"
               required
               formControlName="storage"
               placeholder="容量大小">
        <span style="padding-top: 2px">G</span>
      </div>
      <div class="form-group form-group-padding">
        <label class="col-md-3 form-group-label-override required">访问模式</label>
        <clr-checkbox [clrInline]="true" class="col-md-8"
                      formControlName="readWriteOnce">
          ReadWriteOnce
        </clr-checkbox>
        <clr-checkbox class="form-group form-group-padding"
                      [clrInline]="true" class="col-md-8"
                      formControlName="readOnlyMany">
          ReadOnlyMany
        </clr-checkbox>
        <clr-checkbox class="form-group form-group-padding"
                      [clrInline]="true" class="col-md-8"
                      formControlName="readWriteMany">
          ReadWriteMany
        </clr-checkbox>
      </div>
      <div formArrayName="selectors">
        <div *ngFor="let selector of selectors.controls; let i = index"
             [formGroupName]="i"
             class="form-group form-group-padding">
          <label class="col-md-3 form-group-label-override required">关联标签</label>
          <input type="text" style="width: 300px"
                 formControlName="key"
                 required
                 placeholder="selector名称">
          <input type="text" style="width: 300px"
                 formControlName="value"
                 required
                 placeholder="selector值">
          <a href="javascript:void(0)">
            <clr-icon (click)="onDeleteSelector(i)"
                      shape="trash" title="删除标签" class="is-solid clr-icon"></clr-icon>
          </a>
          <a href="javascript:void(0)">
            <clr-icon (click)="onAddSelector(i)"
                      shape="plus-circle" title="添加标签" class="is-solid clr-icon"></clr-icon>
          </a>
        </div>
      </div>
    </section>
    <div class="clr-wizard-footer-buttons tpl-bottom" [style.top.px]="top">
      <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
      <button type="button" class="btn btn-primary" (click)="openModal()">高级配置</button>
      <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
    </div>
  </form>
</div>
<wayne-ace-editor (outputObj)="savePvcTpl($event)"></wayne-ace-editor>
